<template>
  <div class="artist-category">
	  <div class="artist-sreach">
		  <div>语种:</div>
		  <div v-for="(item,index) in areaList" :key="index" class="artist-sreach-item">
		  	<div  @click="tagshandle(index,item.id)" :class="index===currentIndex?'active':''">{{item.area}}</div>
		  </div>
	  </div>
	  <div class="artist-sreach">
	  		<div>分类:</div>
	  		  <div v-for="(item,index) in typeList" :key="index" class="artist-sreach-item">
	  		  	<div  @click="typeshandle(index,item.id)" :class="index===currentTypeIndex?'active':''">{{item.type}}</div>
	  		</div>
	  </div>
	 <div class="artist-sreach">
	  		  <div>筛选:</div>
	  		  <div v-for="(item,index) in initialList" :key="index" class="all-music-list-hot-item">
	  		  	<div style="width: 20px;" @click="initialhandle(index,item)" :class="index===currentInitialIndex?'active':''">{{item}}</div>
	  		  </div>
	  </div>
	  <div class="artist-list">
		  <div class="artist-list-item" v-for="(item,index) in artistsList" :key="index">
		  <div @click="artistsHandel(item.id)">
			  <el-image :src="item.img1v1Url"></el-image>
		  </div>
		  <div>{{item.name}}</div>
		  </div>
	  </div>
	  <el-pagination
	        @size-change="handleSizeChange"
	        @current-change="handleCurrentChange"
	        :current-page="listQuery.offset"
	        :page-sizes="[50,60 ,70, 80]"
	        :page-size="listQuery.limit"
	        layout="total, sizes, prev, pager, next, jumper"
			:page-count="50"
	       >
	  </el-pagination>
  </div>
</template>

<script>
import {_getArtistList} from "network/artist.js"


export default {
  name:'ArtistCategory',
  data(){
    return{
		listQuery:{
			type:-1,
			area:-1,
			initial:null,
			limit:30,
			offset:1,
		},
		typeList:[
			{id:-1,type:'全部'},
			{id:1,type:'男歌手'},
			{id:2,type:'女歌手'},
			{id:3,type:'乐队'},
		],
		areaList:[
			{id:-1,area:'全部'},
			{id:7,area:'华语'},
			{id:96,area:'欧美'},
			{id:8,area:'日本'},
			{id:16,area:'韩国'},
			{id:0,area:'其他'},
		],
		initialList:['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'],
		artistsList:[],
		currentIndex:-1,
		currentTypeIndex:-1,
		currentInitialIndex:-1,
		
    }
  },
  created(){
	  this.getList()
  },
  methods:{
	  getList(){
		  _getArtistList(this.listQuery).then(res=>{
			  this.artistsList=res.data.artists
	
		  })
	  },
    tagshandle(index,val){
		this.currentIndex=index;
		this.listQuery.area=val;
		this.getList();
	},
	typeshandle(index,val){
		this.currentTypeIndex=index;
		this.listQuery.type=val;
		this.getList();
	},
	initialhandle(index,val){
		this.currentInitialIndex=index;
		this.listQuery.initial=val;
		this.getList();
	},
	handleSizeChange(val){
			 this.listQuery.offset = 1;
			 this.listQuery.limit = val;
			this.getList();
	},
	handleCurrentChange(val){
			this.listQuery.offset = val;
			this.getList();  
	},
	artistsHandel(id){
			 this.$router.push(
			   "/artistdetail/" +
			     id);
	}
  }
}
</script>

<style lang="less" scoped>
.artist-category{
	padding: 20px 70px;
}
.artist-sreach{
	display: flex;
	margin: 10px 0;
	text-align: left;
	div{
		
		width: 100px;
		height: 30px;
		line-height: 30px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		font-size:14px;
		
	}
	.active{
		color: #2d8cf0;
	}
}
.artist-list{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	font-size: 14px;
	.artist-list-item{
		width: calc(100%/6);
		padding: 5px 10px;
	}
}

/deep/ .el-button {
	padding: 0;
}
</style>